<template>
  <div class="a_z_type">
    <a-button type="primary" @click="()=>{this.show = !this.show}">新增</a-button>
    <a-table :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="action">
        <a-button type="link">删除</a-button>
      </span>
    </a-table>
    <a-card v-if="show" class="new">
      <a-form-model :model="form" :label-col="{span:6}" :wrapper-col="{span:18}">
        <a-form-model-item label="类型">
          <a-input v-model="form.type" placeholder="请输入类型名" />
        </a-form-model-item>
        <a-form-model-item class="submit" :wrapper-col="{span:5}">
          <a-button class="submit" @click="submit" type="primary">提交</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>
<script>
import { getArticleType, addType } from '../../api/manage.js'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '类别名称',
    dataIndex: 'typeName',
    key: 'typeName'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  data () {
    return {
      data: [],
      columns,
      show: false,
      form: {}
    }
  },
  mounted () {
    this.initType()
  },
  methods: {
    async initType () {
      const res = await getArticleType()
      this.data = res.data
    },
    async submit () {
      const type = this.form.type
      const res = await addType(type)
      if (res.status === 200) {
        this.$notification.open({
          message: '提示',
          description: '添加成功',
          duration: 0
        })
        this.show = !this.show
        this.initType()
      }
    }
  }
}
</script>

<style lang="scss">
.new {
  width: 300px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.submit {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
